<template>
	<div class="publicformview">
		<el-form label-width='107px' :inline="true" :model="listQuery" :disabled='blockType==3' size="mini" ref="searchForm"
			style="margin-top: 20px;">
			<el-row :gutter="10">
				<el-row :gutter="10">
					<el-col :span="6">
						<el-form-item label="完损等级：" prop="conditionlevel">
							<el-select v-model="listQuery.conditionlevel" @change="wansunChange">
								<div v-for="(item,index) in wansundengjiList" :key="index">
									<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="新旧程度：" prop="newoldlevel">
							<el-select v-model="listQuery.newoldlevel" @change="xinjiuChange" value-key="detail">
								<div v-for="(item,index) in xinjiuchengduList" :key="index">
									<el-option :label="item.detail" :value="item" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="折旧率： " prop="newolddepreciationrate">
							<el-input disabled v-model="formattedRate"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="地基基础：" prop="contionfondation">
							<el-select v-model="listQuery.contionfondation">
								<div v-for="(item,index) in dijijichuList" :key="index">
									<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-col :span="6">
					<el-form-item label="楼地面：" prop="conditionfloor">
						<el-select v-model="listQuery.conditionfloor">
							<div v-for="(item,index) in loudimianList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="承重构件：" prop="conditionbearingwall">
						<el-select v-model="listQuery.conditionbearingwall">
							<div v-for="(item,index) in chengzhonggoujianList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="屋面：" prop="conditionroomwall">
						<el-select v-model="listQuery.conditionroomwall">
							<div v-for="(item,index) in wumianList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="非承重墙：" prop="conditionnonbearingwall">
						<el-select v-model="listQuery.conditionnonbearingwall">
							<div v-for="(item,index) in feichengzhongqiangList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="顶棚：" prop="conditionceiling">
						<el-select v-model="listQuery.conditionceiling">
							<div v-for="(item,index) in dingpengList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="外抹灰：" prop="conditionoutermortar">
						<el-select v-model="listQuery.conditionoutermortar">
							<div v-for="(item,index) in waimohuiList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="内抹灰：" prop="conditioninnermorter">
						<el-select v-model="listQuery.conditioninnermorter">
							<div v-for="(item,index) in meimohuiList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="门窗：" prop="conditiondoorwin">
						<el-select v-model="listQuery.conditiondoorwin">
							<div v-for="(item,index) in menchuangList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="设备：" prop="conditionfacility">
						<el-select v-model="listQuery.conditionfacility">
							<div v-for="(item,index) in shebeiList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="健康状况：" prop="conditiontext">
						<el-input v-model="listQuery.conditiontext" style="width: 300px" type="textarea" :rows="2"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<div class="fangwuList">
				<div class="fangwuText">屋顶</div>
				<el-col :span="6">
					<el-form-item label="屋面材料：" prop="roofmaterial">
						<el-select v-model="listQuery.roofmaterial">
							<div v-for="(item,index) in wumiancailiaoList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="屋架结构：" prop="rooftruss">
						<el-select v-model="listQuery.rooftruss">
							<div v-for="(item,index) in wujiajiegouList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
			</div>
			<div class="fangwuList">
				<div class="fangwuText">楼层</div>
				<el-col :span="6">
					<el-form-item label="楼板：" prop="floorslab">
						<el-select v-model="listQuery.floorslab">
							<div v-for="(item,index) in loubanList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="楼梯：" prop="floorstairs">
						<el-select v-model="listQuery.floorstairs">
							<div v-for="(item,index) in loutiList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="走廊：" prop="floorcorridor">
						<el-select v-model="listQuery.floorcorridor">
							<div v-for="(item,index) in zoulangList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
			</div>
			<div class="fangwuList">
				<div class="fangwuText">墙身</div>
				<el-col :span="6">
					<el-form-item label="砌砖材料：" prop="wallmaterail">
						<el-select v-model="listQuery.wallmaterail">
							<div v-for="(item,index) in qiezhuancailiaoList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="外墙面：" prop="walloutsidematerial">
						<el-select v-model="listQuery.walloutsidematerial">
							<div v-for="(item,index) in waiqiangmianList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="墙厚(cm)：" prop="wallthickinside">
						内
						<el-input type="number" v-model="listQuery.wallthickinside"></el-input>

					</el-form-item>
				</el-col>

				<el-col :span="6">
					<el-form-item prop="wallthickoutside">
						外
						<el-input type="number" v-model="listQuery.wallthickoutside"></el-input>

					</el-form-item>
				</el-col>
			</div>
			<div class="fangwuList">
				<div class="fangwuText">门窗</div>
				<el-col :span="6">
					<el-form-item label="材料：" prop="doorwinmaterial">
						<el-select v-model="listQuery.doorwinmaterial">
							<div v-for="(item,index) in cailiaoList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="槽数：" prop="doorwingrooveno">
						<el-input type="number" v-model="listQuery.doorwingrooveno"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="纱窗：" prop="doorwinscreen">
						<el-select v-model="listQuery.doorwinscreen">
							<div v-for="(item,index) in shachuangList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
			</div>
			<div class="fangwuList">
				<div class="fangwuText">其他部分</div>
				<el-col :span="6">
					<el-form-item label="顶棚：" prop="otherstructureroof">
						<el-select v-model="listQuery.otherstructureroof">
							<div v-for="(item,index) in qitadingpengList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="供热：" prop="providerwarm">
						<el-select v-model="listQuery.providerwarm">
							<div v-for="(item,index) in qitagongreList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
			</div>
			<div class="fangwuList">
				<div class="fangwuText">其他情况</div>
				<el-col :span="6">
					<el-form-item label="电梯：" prop="elevatorcount">
						<el-input type="number" v-model="listQuery.elevatorcount"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="水泵：" prop="pumpcount">
						<el-input type="number" v-model="listQuery.pumpcount"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="水箱：" prop="wartertankcount">
						<el-input type="number" v-model="listQuery.wartertankcount"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="典型建筑：" prop="modelbuilding">
						<el-select v-model="listQuery.modelbuilding">
							<div v-for="(item,index) in dianxingjianzuList" :key="index">
								<el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-row>

					<el-col :span="12">
						<el-form-item label="备注：" prop="housestatememo">
							<el-input v-model="listQuery.housestatememo" style="width: 300px;" type="textarea" :rows="2"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</div>
		</el-form>
		<div class="bottomTop" style="margin-top: 10px;" v-if='blockType!=3'>
			<el-button type="primary" size="mini" @click="handleAddUser">保存</el-button>
		</div>
	</div>
</template>

<script>
	import {
		addBlockDetail,
		blockDetail,
		updBlockDetail
	} from '@/api/industry'
	export default {
		props: {
			blockType: String,
			blockid: String
		},
		name: 'fangwuxianzhuang',
		data() {
			return {
				listQuery: {
					conditionlevel: '',
					newoldlevel: '',
					newolddepreciationrate: '',
					contionfondation: '',
					conditionfloor: '',
					conditionbearingwall: '',
					conditionroomwall: '',
					conditionnonbearingwall: '',
					conditionceiling: '',
					conditionoutermortar: '',
					conditioninnermorter: '',
					conditiondoorwin: '',
					conditionfacility: '',
					conditiontext: '',
					roofmaterial: '',
					rooftruss: '',
					floorslab: '',
					floorstairs: '',
					floorcorridor: '',
					wallmaterail: '',
					walloutsidematerial: '',
					wallthickinside: '',
					wallthickoutside: '',
					doorwinmaterial: '',
					doorwingrooveno: '',
					doorwinscreen: '',
					otherstructureroof: '',
					providerwarm: '',
					housestatememo: '',
					elevatorcount: '',
					wartertankcount: '',
					pumpcount: '',
					modelbuilding: ''
				},
				total: 0,
				options: [{
					key: '1'
				}],
				listLoading: false,
				dialogVisible: false,
				isChanquan: true,
				type: 1,
				// 完损等级
				wansundengjiList: [],
				// 新旧程度
				xinjiuchengduList: [],
				// 地基基础
				dijijichuList: [],
				// 楼地面
				loudimianList: [],
				// 承重构件
				chengzhonggoujianList: [],
				// 屋面
				wumianList: [],
				// 非承重墙
				feichengzhongqiangList: [],
				// 顶棚
				dingpengList: [],
				// 外抹灰
				waimohuiList: [],
				// 内抹灰
				meimohuiList: [],
				// 门窗
				menchuangList: [],
				// 设备
				shebeiList: [],
				// 屋面材料
				wumiancailiaoList: [],
				// 屋架结构
				wujiajiegouList: [],
				// 楼板
				loubanList: [],
				// 楼梯
				loutiList: [],
				// 走廊
				zoulangList: [],
				// 砌砖材料
				qiezhuancailiaoList: [],
				// 外墙面
				waiqiangmianList: [],
				// 材料
				cailiaoList: [],
				// 纱窗
				shachuangList: [],
				// 其他顶棚
				qitadingpengList: [],
				// 其他供热
				qitagongreList: [],
				// 典型建筑
				dianxingjianzuList: []
			}
		},

		computed: {
			formattedRate() {
				// 处理可能为null或undefined的情况，乘以100后保留两位小数，再加上百分号
				if (
					this.listQuery.newolddepreciationrate === null ||
					this.listQuery.newolddepreciationrate === undefined
				) {
					return ''
				}
				return this.listQuery.newolddepreciationrate * 100 + '%'
			}
		},

		mounted() {
			// 遍历字典
			this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
			this.chanyeList.forEach((item, index) => {
				if (item.classname == '完损等级') {
					this.wansundengjiList = item.classmidList
				} else if (item.classname == '房屋现状') {
					item.classmidList.forEach((it, idx) => {
						if (it.classmid == '地基基础') {
							this.dijijichuList = it.classdetailList
						} else if (it.classmid == '楼地面') {
							this.loudimianList = it.classdetailList
						} else if (it.classmid == '承重构件') {
							this.chengzhonggoujianList = it.classdetailList
						} else if (it.classmid == '屋面') {
							this.wumianList = it.classdetailList
						} else if (it.classmid == '非承重墙') {
							this.feichengzhongqiangList = it.classdetailList
						} else if (it.classmid == '顶棚') {
							this.dingpengList = it.classdetailList
						} else if (it.classmid == '外抹灰') {
							this.waimohuiList = it.classdetailList
						} else if (it.classmid == '内抹灰') {
							this.meimohuiList = it.classdetailList
						} else if (it.classmid == '门窗') {
							this.menchuangList = it.classdetailList
						} else if (it.classmid == '设备') {
							this.shebeiList = it.classdetailList
						}
					})
				} else if (item.classname == '建筑构造情况') {
					item.classmidList.forEach((it, idx) => {
						if (it.classmid == '屋顶--屋面材料') {
							this.wumiancailiaoList = it.classdetailList
						} else if (it.classmid == '屋顶--屋架形式') {
							this.wujiajiegouList = it.classdetailList
						} else if (it.classmid == '楼层--楼板') {
							this.loubanList = it.classdetailList
						} else if (it.classmid == '楼层--楼梯') {
							this.loutiList = it.classdetailList
						} else if (it.classmid == '楼层--外走廊') {
							this.zoulangList = it.classdetailList
						} else if (it.classmid == '墙身--砌体材料') {
							this.qiezhuancailiaoList = it.classdetailList
						} else if (it.classmid == '墙身--外墙面') {
							this.waiqiangmianList = it.classdetailList
						} else if (it.classmid == '门窗--材料') {
							this.cailiaoList = it.classdetailList
						} else if (it.classmid == '门窗--纱窗') {
							this.shachuangList = it.classdetailList
						} else if (it.classmid == '其他--顶棚') {
							this.qitadingpengList = it.classdetailList
						} else if (it.classmid == '其他--供热') {
							this.qitagongreList = it.classdetailList
						} else if (it.classmid == '典型建筑') {
							this.dianxingjianzuList = it.classdetailList
						}
					})
				}
			})

			if (this.blockid) {
				let data = {
					BlockID: this.blockid
				}
				blockDetail(data).then((res) => {
					console.log(res)
					this.listQuery = res.data
				})
			}
			if (localStorage.getItem('fangwuxianzhuang')) {
				this.listQuery = JSON.parse(localStorage.getItem('fangwuxianzhuang'))
			}
		},

		methods: {
			// 完损等级选择
			wansunChange(value) {
				this.chanyeList.forEach((item, index) => {
					if (item.classname == '完损等级') {
						item.classmidList.forEach((it, idx) => {
							if (value == '完好' && it.classmid == '完好') {
								this.xinjiuchengduList = it.classdetailList
							} else if (value == '基本完好' && it.classmid == '基本完好') {
								this.xinjiuchengduList = it.classdetailList
							} else if (value == '一般损坏' && it.classmid == '一般损坏') {
								this.xinjiuchengduList = it.classdetailList
							} else if (value == '严重损坏' && it.classmid == '严重损坏') {
								this.xinjiuchengduList = it.classdetailList
							} else if (value == '危房' && it.classmid == '危房') {
								this.xinjiuchengduList = it.classdetailList
							}
						})
					}
				})
			},
			//新旧
			xinjiuChange(e) {
				console.log(e)
				this.listQuery.newolddepreciationrate = e.value
				this.listQuery.newoldlevel = e.detail
			},
			resetForm(val) {
				console.log('1')
				this.$refs[val].resetFields()
			},
			handleAddUser() {
				console.log(localStorage.getItem('blockid'))
				let data = {
					conditionlevel: this.listQuery.conditionlevel,
					newoldlevel: this.listQuery.newoldlevel,
					newolddepreciationrate: this.listQuery.newolddepreciationrate,
					contionfondation: this.listQuery.contionfondation,
					conditionfloor: this.listQuery.conditionfloor,
					conditionbearingwall: this.listQuery.conditionbearingwall,
					conditionroomwall: this.listQuery.conditionroomwall,
					conditionnonbearingwall: this.listQuery.conditionnonbearingwall,
					conditionceiling: this.listQuery.conditionceiling,
					conditionoutermortar: this.listQuery.conditionoutermortar,
					conditioninnermorter: this.listQuery.conditioninnermorter,
					conditiondoorwin: this.listQuery.conditiondoorwin,
					conditionfacility: this.listQuery.conditionfacility,
					conditiontext: this.listQuery.conditiontext,
					roofmaterial: this.listQuery.roofmaterial,
					rooftruss: this.listQuery.rooftruss,
					floorslab: this.listQuery.floorslab,
					floorstairs: this.listQuery.floorstairs,
					floorcorridor: this.listQuery.floorcorridor,
					wallmaterail: this.listQuery.wallmaterail,
					walloutsidematerial: this.listQuery.walloutsidematerial,
					wallthickinside: this.listQuery.wallthickinside,
					wallthickoutside: this.listQuery.wallthickoutside,
					doorwinmaterial: this.listQuery.doorwinmaterial,
					doorwingrooveno: this.listQuery.doorwingrooveno,
					doorwinscreen: this.listQuery.doorwinscreen,
					otherstructureroof: this.listQuery.otherstructureroof,
					providerwarm: this.listQuery.providerwarm,
					housestatememo: this.listQuery.housestatememo,
					elevatorcount: this.listQuery.elevatorcount,
					wartertankcount: this.listQuery.wartertankcount,
					pumpcount: this.listQuery.pumpcount,
					modelbuilding: this.listQuery.modelbuilding,
					blockid: localStorage.getItem('blockid')
				}
				localStorage.setItem('fangwuxianzhuang', JSON.stringify(data))
				if (this.blockType == 2 || this.blockType == 4) {
					updBlockDetail(data).then((res) => {
						console.log(res)
						this.$message(res.message)
						this.$router.go(-1)
					})
				} else {
					addBlockDetail(data).then((res) => {
						console.log(res)
						this.$message(res.message)
						this.$router.go(-1)
					})
				}
			},
			returns() {
				this.$router.go(-1)
			},
			// 选择类型
			selectButton(type) {
				this.type = type
			}
		},
		beforeDestroy() {
			let data = {
				conditionlevel: this.listQuery.conditionlevel,
				newoldlevel: this.listQuery.newoldlevel,
				newolddepreciationrate: this.listQuery.newolddepreciationrate,
				contionfondation: this.listQuery.contionfondation,
				conditionfloor: this.listQuery.conditionfloor,
				conditionbearingwall: this.listQuery.conditionbearingwall,
				conditionroomwall: this.listQuery.conditionroomwall,
				conditionnonbearingwall: this.listQuery.conditionnonbearingwall,
				conditionceiling: this.listQuery.conditionceiling,
				conditionoutermortar: this.listQuery.conditionoutermortar,
				conditioninnermorter: this.listQuery.conditioninnermorter,
				conditiondoorwin: this.listQuery.conditiondoorwin,
				conditionfacility: this.listQuery.conditionfacility,
				conditiontext: this.listQuery.conditiontext,
				roofmaterial: this.listQuery.roofmaterial,
				rooftruss: this.listQuery.rooftruss,
				floorslab: this.listQuery.floorslab,
				floorstairs: this.listQuery.floorstairs,
				floorcorridor: this.listQuery.floorcorridor,
				wallmaterail: this.listQuery.wallmaterail,
				walloutsidematerial: this.listQuery.walloutsidematerial,
				wallthickinside: this.listQuery.wallthickinside,
				wallthickoutside: this.listQuery.wallthickoutside,
				doorwinmaterial: this.listQuery.doorwinmaterial,
				doorwingrooveno: this.listQuery.doorwingrooveno,
				doorwinscreen: this.listQuery.doorwinscreen,
				otherstructureroof: this.listQuery.otherstructureroof,
				providerwarm: this.listQuery.providerwarm,
				housestatememo: this.listQuery.housestatememo,
				elevatorcount: this.listQuery.elevatorcount,
				wartertankcount: this.listQuery.wartertankcount,
				pumpcount: this.listQuery.pumpcount,
				modelbuilding: this.listQuery.modelbuilding,
				blockid: localStorage.getItem('blockid')
			}
			localStorage.setItem('fangwuxianzhuang', JSON.stringify(data))
		}
	}
</script>

<style scoped>
	.headTop {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.xinxi {
			display: flex;
			width: 800px;
		}
	}

	.el-form-item {
		justify-content: start !important;
	}

	.el-select {
		width: 180px;
	}

	.el-input {
		width: 180px;
	}

	.el-date-picker {
		width: 180px;
	}

	.bottomTop {
		width: 100%;
		display: flex;
		justify-content: end;
	}

	.tabButton {
		background: #eff2f7;
		color: #333333;
		border: none;
	}

	.fangwuList {
		width: 100%;
		background-color: #f5f5f5;
		margin: 3px auto 0;
		overflow: hidden;
	}

	.fangwuText {
		font-weight: bold;
		font-size: 16px;
		color: #008c93;
		margin-top: 20px;
		margin-left: 26px;
	}
</style>